<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>填写工单</el-breadcrumb-item>
    </el-breadcrumb>
    <router-view></router-view>
    <div style="margin-top: 50px;margin-left:50px;width: 600px;">
      <el-form ref="tsWorkOrder"
               :model="tsWorkOrder"
               label-width="80px"
               vertical-align:
               middle>
        <el-form-item label="问题标题">
          <el-input v-model="tsWorkOrder.woProTitle"></el-input>
        </el-form-item>
        <el-form-item label="工单类型">
          <el-select v-model="tsWorkOrder.woProTypeId"
                     placeholder="请选择工单类型">
            <el-option v-for="category in categoryList"
                       :key="category.categoryId"
                       :label="category.categoryName"
                       :value="category.categoryId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input type="textarea"
                    v-model="tsWorkOrder.woProCont"
                    :rows="15"></el-input>
        </el-form-item>
        <!-- 图片上传  -->
        <el-form-item label="问题截图"
                      prop="idPhoto">
          <el-upload ref="pictureUpload"
                     action="/api/fileUpload/workOrderImgUpload"
                     list-type="picture-card"
                     multiple
                     :auto-upload="true"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove"
                     :on-success="getUrlList"
                     :limit="5">
            <i slot="default"
               class="el-icon-plus"></i>
            <div slot="file"
                 slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail"
                   :src="file.url"
                   alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete"
                      @click="handleDownload(file)">
                  <i class="el-icon-download"></i>
                </span>
                <span class="el-upload-list__item-delete"
                      @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <!-- 1、预览 -->
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="预览图片" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="优先级">
          <el-radio-group v-model="tsWorkOrder.woPriority">
            <el-radio label="0">一般</el-radio>
            <el-radio label="1">重要</el-radio>
            <el-radio label="2">严重</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="匿名提交">
          <!-- 开启为1 关闭为0 -->
          <el-switch v-model="tsWorkOrder.woIsAnon"
                     :active-value="1"
                     :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit">提交工单</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tsWorkOrder: {
        woProTypeId: '',
        woProTitle: '',
        woProCont: '',
        woPriority: '',
        woSubmitId: '4',
        woIsAnon: '',
        woImgList: [],
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
    }
  },
  created() {
    // 查出所有的分类的名字和id,绑定 到category
    console.log('路由信息', this.$route)
    //把上个路由传来的分类内容存入当前页面的对象中
    this.categoryList = this.$route.params.categoryList
    //默认选项为上个页面选中的值,可在本部门内进行修改
    this.tsWorkOrder.woProTypeId = this.$route.params.categoryId
  },
  methods: {
    //提交按钮
    onSubmit() {
      // 获取到图片上传区的地址集合
      console.log('我要上传的图片集合', this.$refs.pictureUpload.uploadFiles)

      let list = this.$refs.pictureUpload.uploadFiles

      list.forEach((item, i) => {
        //把本地的地址赋值到表单对象中的woImgList集合中
        this.tsWorkOrder.woImgList.push({ imgUrl: item.url ,createById:this.tsWorkOrder.woSubmitId})
      })
      console.log(this.tsWorkOrder)
      // 获取提交人的id
      // this.tsWorkOrder.woSubmitId=localStorage.getItem("userId");
      this.$axios
        .post('/api/workOrder/user/submit', this.tsWorkOrder)
        .then((res) => {
          if (res.data.code == 200) {
            // 页面跳转
           this.$router.push({
        name: '提交成功',
        params: { },
      })
          }
        })
        .catch()
    },
    // 2、下载
    handleDownload(file) {
      window.open(file.url)
    },
    // 3、删除--根据 url 的不同进行匹配删除
    handleRemove(file) {
      let uploadFiles = this.$refs.pictureUpload.uploadFiles
      for (var i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]['url'] == file.url) {
          uploadFiles.splice(i, 1)
        }
      }
      //删除云端的图片
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    getUrlList(res, file, fileList) {
      file.url = res.data[0]
    },
  },
}
</script>